<template>
    <div class="home">
        <div>
            <el-carousel indicator-position="outside" height="400px">
                <el-carousel-item v-for="(item, index) in list" :key="index">
                    <img
                        :src="'http://47.115.85.237:3000/' + item.imgPath"
                        alt=""
                        width="1900px"
                    />
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="center">
            <div class="on1">
                <img src="@/assets/2.png" alt="" />
            </div>
            <div class="on2">
                <ul>
                    <li v-for="item in cate" :key="item.product_id">
                        <img
                            :src="
                                'http://47.115.85.237:3000/' +
                                    item.product_picture
                            "
                            alt=""
                        />
                        <p>{{ item.product_name }}</p>
                        <p>{{ item.product_title }}</p>
                        <p>{{ item.product_price }}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            cate: [],
        };
    },
    mounted() {
        this.$axios.post("/api/resources/carousel").then((res) => {
            // console.log(res);
            this.list = res.data.carousel;
        });
        this.$axios
            .post("/api/product/getHotProduct", { categoryName: ["手机"] })
            .then((res) => {
                // console.log(res);
                this.cate = res.data.Product;
                // console.log(this.cate);
            });
    },
};
</script>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}
.center {
    width: 1400px;
    height: 700px;
    background: #f5f5f5;
    display: flex;
    margin: auto;
    .on1 {
        width: 300px;
        height: 100%;

        // background: red;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .on2 {
        width: 1100px;
        height: 100%;
        // background: yellow;
        ul li:hover {
            transition: all 1s;
            box-shadow: 5px 5px 5px #888888;
            transform: scale(1.02);
        }
        ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            li {
                width: 24%;
                height: 340px;
                background: white;
                margin-top: 10px;
                margin-right: 10px;

                p {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>
